Push Notifications এবং Background Tasks

React Native অ্যাপে Push Notifications এবং Background Tasks দুটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা ব্যবহারকারীদের অ্যাপের মাধ্যমে রিয়েল-টাইম নোটিফিকেশন পাঠাতে এবং অ্যাপের ব্যাকগ্রাউন্ডে কিছু কাজ চালিয়ে যাওয়ার সুযোগ প্রদান করে। এই ফিচারগুলি সাধারণত মোবাইল অ্যাপের ইউজার এক্সপিরিয়েন্স উন্নত করতে ব্যবহৃত হয়, যেমন ইউজারদের নোটিফিকেশন পাঠানো বা ব্যাকগ্রাউন্ডে ডেটা ফেচিং ইত্যাদি কাজ করা।

Push Notifications

Push Notifications একটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা ব্যবহারকারীদের তাদের মোবাইল ডিভাইসে অপ্রত্যাশিতভাবে নোটিফিকেশন প্রেরণ করে। React Native অ্যাপে Push Notification সেটআপ করতে, সাধারণত দুটি মূল স্টেপ থাকে:

1. নোটিফিকেশন সার্ভার সেটআপ: নোটিফিকেশন পাঠানোর জন্য একটি সার্ভার এবং সার্ভার থেকে Push Notification প্রেরণের জন্য Firebase Cloud Messaging (FCM) বা OneSignal ব্যবহার করা হয়।
2. React Native অ্যাপে নোটিফিকেশন সেটআপ: মোবাইল অ্যাপে Push Notification রিসিভ করার জন্য React Native Push Notification অথবা React Native Firebase লাইব্রেরি ব্যবহার করা হয়।

Firebase Cloud Messaging (FCM) সেটআপ

Firebase Cloud Messaging (FCM) হল একটি জনপ্রিয় এবং সহজ পদ্ধতি Push Notification প্রেরণ করার জন্য।

১. Firebase সেটআপ

• Firebase Console-এ গিয়ে একটি নতুন প্রজেক্ট তৈরি করুন Firebase Console.
• আপনার React Native অ্যাপকে Firebase-এ যুক্ত করুন।
• Cloud Messaging ট্যাব থেকে Server Key এবং Sender ID সংগ্রহ করুন, যেগুলি আপনাকে Notification পাঠাতে সাহায্য করবে।

২. React Native Firebase সেটআপ

npm install @react-native-firebase/app @react-native-firebase/messaging

Firebase অ্যাপ এবং Messaging মডিউল ইনস্টল করা হলে, iOS এ pod install রান করুন:

cd ios && pod install && cd ..

৩. Push Notification পাঠানোর কোড

import messaging from '@react-native-firebase/messaging';
import { useEffect } from 'react';
import { View, Text, Button } from 'react-native';

const App = () => {
  useEffect(() => {
    // Firebase Messaging Permission চেক করা
    messaging()
      .requestPermission()
      .then(authStatus => {
        console.log('Permission status:', authStatus);
      });

    // ফোরগ্রাউন্ডে নোটিফিকেশন রিসিভ করা
    const unsubscribe = messaging().onMessage(async remoteMessage => {
      console.log('Received in foreground:', remoteMessage);
    });

    return unsubscribe;
  }, []);

  const sendNotification = async () => {
    await messaging().sendMessage({
      to: 'your_firebase_device_token',
      notification: {
        title: 'Test Notification',
        body: 'This is a test push notification',
      },
    });
  };

  return (
    <View>
      <Text>Push Notifications Example</Text>
      <Button title="Send Test Notification" onPress={sendNotification} />
    </View>
  );
};

export default App;

এখানে, requestPermission() ব্যবহার করা হয়েছে যাতে অ্যাপটি নোটিফিকেশন পাঠানোর অনুমতি পায়। onMessage() মেথড ফোরগ্রাউন্ডে নোটিফিকেশন রিসিভ করতে ব্যবহৃত হয়।

Background Tasks

React Native অ্যাপে Background Tasks ব্যবহার করলে, অ্যাপের কার্যকলাপ অ্যাপ চালু না থাকা অবস্থাতেও (ব্যাকগ্রাউন্ডে) চালানো যায়। এটি খুবই গুরুত্বপূর্ণ যখন আপনি অ্যাপের ব্যাকগ্রাউন্ডে ডেটা ফেচিং, সিঙ্কিং, নোটিফিকেশন পাঠানো বা টাইমার ব্যবস্থাপনা করতে চান।

React Native Background Fetch

React Native Background Fetch একটি লাইব্রেরি যা আপনাকে ব্যাকগ্রাউন্ডে কাজ করার সুবিধা দেয়। এটি সিস্টেমের নির্দিষ্ট সময়ে ব্যাকগ্রাউন্ড টাস্ক চালাতে সক্ষম।

১. React Native Background Fetch ইনস্টলেশন

npm install @transistorsoft/react-native-background-fetch

২. ব্যাকগ্রাউন্ড ফেচ সেটআপ

import BackgroundFetch from '@transistorsoft/react-native-background-fetch';
import { useEffect } from 'react';
import { View, Text } from 'react-native';

const App = () => {
  useEffect(() => {
    const initBackgroundFetch = async () => {
      // BackgroundFetch কনফিগারেশন সেট করা
      const status = await BackgroundFetch.configure(
        {
          minimumFetchInterval: 15, // মিনিটে
          stopOnTerminate: false, // অ্যাপ টার্মিনেট হওয়ার পরেও কাজ চালিয়ে যাবে
          startOnBoot: true, // ডিভাইস রিবুট হওয়ার পরও কাজ চালাবে
        },
        async (taskId) => {
          console.log('[BackgroundFetch] taskId:', taskId);

          // ব্যাকগ্রাউন্ডে কাজ সম্পন্ন হলে
          BackgroundFetch.finish(taskId);
        },
        (error) => {
          console.log('[BackgroundFetch] failed to start', error);
        },
      );
    };

    initBackgroundFetch();

    return () => {
      // ক্লিনআপ
      BackgroundFetch.stop();
    };
  }, []);

  return (
    <View>
      <Text>Background Fetch Example</Text>
    </View>
  );
};

export default App;

এখানে, BackgroundFetch.configure() মেথড ব্যবহার করে ব্যাকগ্রাউন্ড টাস্ক সেট করা হয়েছে, যেখানে minimumFetchInterval সেট করা হয়েছে 15 মিনিট, অর্থাৎ প্রতি 15 মিনিট পর ব্যাকগ্রাউন্ডে কাজটি সম্পন্ন হবে।

React Native Background Tasks - অন্য বিকল্প লাইব্রেরি

1. React Native Background Task: ব্যাকগ্রাউন্ডে দীর্ঘস্থায়ী কাজ চালানোর জন্য ব্যবহৃত হয়, যেমন ফাইল ডাউনলোড বা ইন্টারনেট সিঙ্কিং।

   • ইনস্টলেশন:

     npm install react-native-background-task

2. React Native Fetch Blob: ডেটা ফেচিং এবং ফাইল ডাউনলোডিংয়ের জন্য ব্যাকগ্রাউন্ডে কাজ করার জন্য ব্যবহৃত হয়।

সারাংশ

• Push Notifications: React Native অ্যাপে Firebase Cloud Messaging বা অন্যান্য নোটিফিকেশন সার্ভিস ব্যবহার করে Push Notifications পাঠানো হয়। Firebase ব্যবহারের মাধ্যমে, আমরা ব্যবহারকারীর ডিভাইসে নোটিফিকেশন পাঠাতে পারি এবং অ্যাপের অভ্যন্তরে তা রিসিভ করতে পারি।
• Background Tasks: React Native অ্যাপে Background Tasks পরিচালনা করতে react-native-background-fetch লাইব্রেরি ব্যবহার করা হয়। এটি ব্যাকগ্রাউন্ডে কাজ করার সুবিধা দেয়, যেমন ডেটা সিঙ্কিং, ফাইল ডাউনলোড বা অন্যান্য টাইমিং নির্ভর কাজ।

এগুলি অ্যাপের পারফরম্যান্স এবং ব্যবহারকারীর অভিজ্ঞতা (UX) উন্নত করার জন্য গুরুত্বপূর্ণ ফিচার।

Notifications (নোটিফিকেশন) হল এমন একটি বৈশিষ্ট্য যা মোবাইল অ্যাপ্লিকেশনগুলিতে ব্যবহারকারীকে নতুন তথ্য, বিজ্ঞপ্তি, বা আপডেট জানাতে সহায়ক। Local Notifications এবং Push Notifications হল দুটি প্রধান ধরনের নোটিফিকেশন যা সাধারণভাবে মোবাইল অ্যাপ্লিকেশনে ব্যবহৃত হয়।

এখানে প্রতিটি ধরনের নোটিফিকেশন কী এবং কীভাবে কাজ করে তা বিস্তারিতভাবে বর্ণনা করা হয়েছে:

Local Notifications

Local Notifications হল সেই ধরনের নোটিফিকেশন যা শুধুমাত্র অ্যাপ্লিকেশনটির ভিতর থেকে তৈরি করা হয় এবং মোবাইল ডিভাইসের লোকালি (local) প্রদর্শিত হয়। এই ধরনের নোটিফিকেশন সাধারণত অ্যাপ্লিকেশন থেকে নির্দিষ্ট সময়ে বা শর্তে ব্যবহারকারীকে জানানো হয়।

Local Notifications কীভাবে কাজ করে?

1. এটি মোবাইল ডিভাইসে তৈরি হয়: Local notification অ্যাপ্লিকেশন চলাকালীন মোবাইল ডিভাইসে তৈরি হয় এবং ব্যবহারকারীকে কোনো নির্দিষ্ট সময় বা ইভেন্টের জন্য প্রস্তুত করা হয়।
2. ব্যবহারকারী কোনো অ্যাকশন নেয় না: Local notification অ্যাপ্লিকেশন নিজেই নির্দিষ্ট সময় বা শর্ত অনুযায়ী একটি নোটিফিকেশন তৈরি করে এবং মোবাইলের নোটিফিকেশন শেড এ দেখানো হয়।
3. মোবাইল ডিভাইসে প্রদর্শন: Local notification সাধারণত মোবাইল ডিভাইসের স্ক্রীনে দেখা যায়, যেমন পপ-আপ, সাউন্ড, বা ব্যাজ আপডেটের মাধ্যমে।
4. অ্যাপ্লিকেশন কন্ট্রোল: এটি মূলত মোবাইল অ্যাপ্লিকেশন থেকে চালানো হয় এবং অ্যাপের কার্যকলাপের ভিত্তিতে নির্ধারিত। যেমন, টাস্ক রিমাইন্ডার, ডেটা পরিবর্তন, বা অন্যান্য স্থানীয় ইভেন্টের জন্য এটি ব্যবহৃত হয়।

Local Notifications এর ব্যবহার উদাহরণ:

• রিমাইন্ডার (যেমন, পানির বোতল খালি হলে মনে করিয়ে দেওয়া)
• ডেটার আপডেট (যেমন, অ্যাপের মধ্যে নতুন কোনো কনটেন্ট সংযোজন)
• সময় নির্ধারিত বিজ্ঞপ্তি (যেমন, নির্দিষ্ট সময় বা তারিখে একটি রিমাইন্ডার)

Push Notifications

Push Notifications হল নোটিফিকেশন যা অ্যাপ সার্ভার বা ব্যাকএন্ড সার্ভিস দ্বারা ব্যবহারকারীর মোবাইল ডিভাইসে প্রেরণ করা হয়। Push notification সরাসরি সার্ভার থেকে মোবাইল ডিভাইসে প্রেরিত হয়, যার জন্য ইন্টারনেট কানেকশন প্রয়োজন।

Push Notifications কীভাবে কাজ করে?

1. ব্যাকএন্ড সার্ভিস থেকে প্রেরণ: Push notification সাধারণত সার্ভার বা Cloud Messaging Service (যেমন Firebase Cloud Messaging (FCM) অথবা Apple Push Notification Service (APNS)) থেকে প্রেরিত হয়। সার্ভার প্রেরণ করে যেভাবে মেসেজটি ব্যবহারকারীর মোবাইল ডিভাইসে পৌঁছাবে।
2. ইন্টারনেট কানেকশন প্রয়োজন: Push notification এর জন্য মোবাইল ডিভাইসের ইন্টারনেট কানেকশন থাকতে হবে। একবার মোবাইল ডিভাইসে সংযুক্ত হলে, সার্ভার থেকে নোটিফিকেশন প্রেরণ করা হয়।
3. ব্যবহারকারীকে সতর্ক করা: যখন সার্ভার থেকে Push notification পাঠানো হয়, তখন মোবাইল ডিভাইসে এটি একটি পপ-আপ, ব্যাজ, সাউন্ড বা ইকোনোমিক আপডেটের মাধ্যমে প্রদর্শিত হয়।
4. ইন্টারঅ্যাকশন: Push notification এ সাধারণত ইন্টারঅ্যাকশন থাকে, যেমন কোনো লিঙ্ক বা অ্যাকশন বাটন যা ব্যবহারকারীকে অ্যাপ্লিকেশনে নিয়ে যাবে। উদাহরণস্বরূপ, কোনো নতুন অফার বা বিজ্ঞপ্তির জন্য ব্যবহারকারীকে অ্যাপে নিয়ে যেতে পারে।

Push Notifications এর ব্যবহার উদাহরণ:

• অ্যাপ্লিকেশন থেকে নতুন অফার বা প্রোমোশন
• টেক্সট মেসেজ বা পুশ বিজ্ঞপ্তি
• অ্যাপের ভিতরে কোনও নতুন আপডেট বা তথ্য
• বিজ্ঞাপন বা মার্কেটিং কন্টেন্ট
• ব্যবহারকারীকে অ্যাপ খুলতে বা ইন্টারঅ্যাক্ট করতে উৎসাহিত করা

Local এবং Push Notifications এর মধ্যে পার্থক্য

React Native এ Local এবং Push Notifications বাস্তবায়ন

Local Notification ইনস্টল ও কনফিগারেশন

React Native এ Local Notification তৈরি করতে react-native-push-notification প্যাকেজ ব্যবহার করা হয়। প্রথমে এই প্যাকেজ ইনস্টল করতে হবে:

npm install --save react-native-push-notification

এখন সেটআপ করুন এবং ব্যবহার করুন:

import PushNotification from 'react-native-push-notification';

PushNotification.localNotification({
  title: "Hello",
  message: "This is a local notification",
  playSound: true,
  soundName: 'default',
});

Push Notification ইনস্টল ও কনফিগারেশন

React Native এ Push Notification-এর জন্য Firebase Cloud Messaging (FCM) বা OneSignal এর মতো সেবা ব্যবহার করা যেতে পারে। Firebase Cloud Messaging (FCM) সেটআপের জন্য:

1. Firebase প্রজেক্ট তৈরি করুন
2. Firebase SDK ইনস্টল করুন
3. Firebase থেকে Push Notification সেটআপ করুন

এইভাবে আপনি Push Notification এর মাধ্যমে সার্ভার থেকে ডিভাইসে নোটিফিকেশন পাঠাতে পারেন।

সারাংশ

Local Notifications এবং Push Notifications উভয়ই মোবাইল অ্যাপ্লিকেশনে ব্যবহারকারীকে সময়মতো বা ইভেন্টের ভিত্তিতে নোটিফিকেশন পাঠানোর জন্য ব্যবহৃত হয়। Local Notifications অ্যাপের ভেতরে তৈরি হয় এবং Push Notifications সার্ভার থেকে প্রেরিত হয়। এগুলি ব্যবহৃত হয় বিভিন্ন বিজ্ঞপ্তি, রিমাইন্ডার, বা ব্যবহারকারীর সাথে ইন্টারঅ্যাকশন করতে।

React Native Push Notification হল একটি লাইব্রেরি যা React Native অ্যাপে পুশ নোটিফিকেশন পাঠানোর জন্য ব্যবহৃত হয়। এটি ব্যবহার করে আপনি আপনার অ্যাপে ওয়েবসাইট বা অন্যান্য সার্ভার থেকে পুশ নোটিফিকেশন পাঠাতে পারবেন, যা ব্যবহারকারীদের ডিভাইসে নোটিফিকেশন হিসেবে প্রদর্শিত হবে।

নিচে React Native অ্যাপে Push Notification কনফিগার এবং ব্যবহারের জন্য বিস্তারিত স্টেপ বাই স্টেপ গাইড দেওয়া হল।

১. Push Notification Library ইনস্টল করা

প্রথমে, আপনাকে react-native-push-notification লাইব্রেরিটি ইনস্টল করতে হবে। কমান্ডটি রান করুন:

npm install react-native-push-notification

এটি ইনস্টল করার পর, আপনি React Native Firebase বা OneSignal মত থার্ড-পার্টি সার্ভিস ব্যবহার করে পুশ নোটিফিকেশন পাঠানোর জন্য ইন্টিগ্রেট করতে পারেন।

২. Android এবং iOS সেটআপ

Android সেটআপ:

1. AndroidManifest.xml ফাইলে প্রয়োজনীয় পারমিশন এবং সার্ভিস কনফিগার করুন:

   <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
   <uses-permission android:name="android.permission.VIBRATE" />

2. MainApplication.java ফাইলে React Native Push Notification লাইব্রেরি ইম্পোর্ট করুন:

   import com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage;

   তারপর getPackages() মেথডে এই প্যাকেজটি অ্যাড করুন:

   @Override
   protected List<ReactPackage> getPackages() {
     return Arrays.<ReactPackage>asList(
         new MainReactPackage(),
         new ReactNativePushNotificationPackage() // Add this line
     );
   }

iOS সেটআপ:

1. iOS Deployment Target Xcode এ মিনিমাম 10.0 বা তার বেশি সেট করুন।

2. AppDelegate.m ফাইলে পুশ নোটিফিকেশন কনফিগারেশন এবং রেজিস্ট্রেশন করুন।

   #import <UserNotifications/UserNotifications.h>
   
   // Add this in didFinishLaunchingWithOptions method
   UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];
   [center requestAuthorizationWithOptions:(UNAuthorizationOptionAlert + UNAuthorizationOptionSound + UNAuthorizationOptionBadge)
                         completionHandler:^(BOOL granted, NSError * _Nullable error) {
       // handle permission
   }];

৩. Push Notification কনফিগারেশন এবং সেটআপ

React Native Push Notification লাইব্রেরি ব্যবহার করার জন্য কনফিগারেশন করার দরকার:

import React, { useEffect } from 'react';
import PushNotification from 'react-native-push-notification';

const App = () => {

  useEffect(() => {
    // Push Notification কনফিগারেশন
    PushNotification.configure({
      // Android সেটিংস
      onNotification: function(notification) {
        console.log('Notification received: ', notification);
      },
      requestPermissions: true, // ডিভাইসের পারমিশন চাইবে
    });

    // পুশ নোটিফিকেশন সেটিংস
    PushNotification.createChannel(
      {
        channelId: "default-channel", // ইউনিক চ্যানেল আইডি
        channelName: "Default Channel", // চ্যানেলের নাম
        channelDescription: "A default channel", // চ্যানেল বর্ণনা
        playSound: true, // সাউন্ড বাজানোর অপশন
        soundName: "default", // সাউন্ড ফাইল নাম
        importance: 4, // নোটিফিকেশনের গুরুত্ব
        vibrate: true, // কম্পনের অপশন
      },
      (created) => console.log(`createChannel returned '${created}'`) // চ্যানেল তৈরির রেসপন্স
    );

  }, []);

  // পুশ নোটিফিকেশন পাঠানোর ফাংশন
  const sendNotification = () => {
    PushNotification.localNotification({
      channelId: "default-channel",
      title: "Hello!", 
      message: "This is a simple push notification", 
      smallIcon: "ic_notification", // অ্যাপের আইকন
    });
  };

  return (
    <React.Fragment>
      <Button title="Send Notification" onPress={sendNotification} />
    </React.Fragment>
  );
};

export default App;

কনফিগারেশন পয়েন্টস:

• onNotification: এটি নোটিফিকেশন রিসিভ হলে কল হবে এবং আপনি ডিভাইসে নোটিফিকেশন দেখানোর জন্য এটি ব্যবহার করতে পারেন।
• createChannel: এটি Android এ চ্যানেল তৈরি করতে ব্যবহৃত হয়, যা নোটিফিকেশন স্টাইল এবং অর্ডার কন্ট্রোল করতে সাহায্য করে।
• localNotification: এটি স্থানীয়ভাবে ডিভাইসে নোটিফিকেশন পাঠানোর জন্য ব্যবহৃত হয়।

৪. Push Notification Permission চাওয়া

পুশ নোটিফিকেশন ব্যবহার করার জন্য প্রথমে ব্যবহারকারীর অনুমতি নেয়া প্রয়োজন। iOS-এ, আপনি requestPermissions ব্যবহার করতে পারেন, যা কনফিগারেশনের মাধ্যমে নোটিফিকেশন অনুমতি চেয়ে নেবে। Android এ সাধারণত পারমিশন দরকার হয় না, তবে কাস্টম কেসের জন্য PermissionsAndroid ব্যবহার করা যেতে পারে।

import { PermissionsAndroid } from 'react-native';

// Android Permission Request
const requestNotificationPermission = async () => {
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS,
      {
        title: "Push Notification Permission",
        message: "We need access to show push notifications",
      }
    );
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log("Notification permission granted");
    } else {
      console.log("Notification permission denied");
    }
  } catch (err) {
    console.warn(err);
  }
};

৫. Push Notification পাঠানো

আপনি যদি সার্ভার থেকে Push Notification পাঠাতে চান, তবে Firebase Cloud Messaging (FCM) বা OneSignal ব্যবহার করতে পারেন।

• FCM (Firebase Cloud Messaging) এর মাধ্যমে আপনি সার্ভার থেকে পুশ নোটিফিকেশন পাঠাতে পারবেন।
• OneSignal একটি আরও সহজ পুশ নোটিফিকেশন সার্ভিস, যা আপনাকে অ্যানালিটিক্স এবং ট্র্যাকিং এর সুবিধা দেয়।

সারাংশ

• React Native Push Notification লাইব্রেরি আপনাকে আপনার React Native অ্যাপে পুশ নোটিফিকেশন পাঠাতে এবং রিসিভ করতে সাহায্য করে।
• এই লাইব্রেরি ব্যবহার করে আপনি নেটিভ পুশ নোটিফিকেশন সেটআপ করতে পারবেন, লেকাল নোটিফিকেশন এবং ব্যাকগ্রাউন্ড নোটিফিকেশন এর মাধ্যমে ব্যবহারকারীকে জানাতে পারবেন।
• createChannel ব্যবহার করে Android এ কাস্টম চ্যানেল তৈরি করতে হবে।

Background Tasks এবং Background Fetch হল দুটি গুরুত্বপূর্ণ ফিচার যা React Native অ্যাপে ব্যাকগ্রাউন্ডে চলমান কার্যকলাপ পরিচালনা করতে ব্যবহৃত হয়। এই ফিচারগুলির মাধ্যমে অ্যাপ্লিকেশন ব্যাকগ্রাউন্ডে বা ইনঅ্যাকটিভ অবস্থায়ও নির্দিষ্ট কাজ চালিয়ে যেতে পারে, যেমন ডেটা সিঙ্ক্রোনাইজেশন, পুশ নোটিফিকেশন, বা অন্যান্য টাইম-কনজিউমিং কার্যকলাপ।

নিচে Background Tasks এবং Background Fetch এর কার্যকলাপ, সেটআপ এবং ব্যবহার পদ্ধতি আলোচনা করা হয়েছে।

1. Background Tasks

Background Tasks বলতে বোঝানো হয় অ্যাপ্লিকেশনটির ব্যাকগ্রাউন্ডে কিছু কাজ চলতে থাকা, যেমন ডেটা সিঙ্ক্রোনাইজেশন বা সার্ভারের সাথে যোগাযোগ করা, যদিও অ্যাপ ব্যবহারকারী দ্বারা সক্রিয়ভাবে ব্যবহৃত না হলেও। ব্যাকগ্রাউন্ড টাস্ক মূলত ব্যাটারি এবং ডিভাইসের পারফরম্যান্সের উপর বেশি প্রভাব ফেলে, তাই এই কাজগুলি দক্ষভাবে পরিচালনা করা গুরুত্বপূর্ণ।

ব্যাকগ্রাউন্ড টাস্ক ব্যবহারের জন্য লাইব্রেরি

React Native-এ ব্যাকগ্রাউন্ড টাস্কের জন্য জনপ্রিয় লাইব্রেরি হলো react-native-background-task।

ইনস্টলেশন

npm install react-native-background-task

ব্যাকগ্রাউন্ড টাস্ক সেটআপ

import BackgroundTask from 'react-native-background-task';

// ব্যাকগ্রাউন্ড টাস্ক রেজিস্টার করা
BackgroundTask.define(() => {
  console.log('Background task is running');
  // কিছু কাজ বা API কল করতে পারেন
  BackgroundTask.finish();
});

// ব্যাকগ্রাউন্ড টাস্ক চালু করা
const runBackgroundTask = () => {
  BackgroundTask.schedule({
    period: 900, // প্রতিটি 15 মিনিটে টাস্ক রান হবে
  });
};

// অ্যাপের ইনিশিয়ালাইজেশনে ব্যাকগ্রাউন্ড টাস্ক শুরু করা
useEffect(() => {
  runBackgroundTask();
  BackgroundTask.register();
}, []);

এখানে BackgroundTask.define একটি ফাংশন হিসাবে ব্যাকগ্রাউন্ড টাস্কের কাজ নির্ধারণ করা হয়েছে, যা নির্দিষ্ট সময়ে চলতে থাকবে এবং BackgroundTask.finish কল করা হয়েছে যাতে টাস্কটি সফলভাবে শেষ হয়। BackgroundTask.schedule দ্বারা কাজের সময় নির্ধারণ করা হয়েছে (যেমন ১৫ মিনিট পর পর)।

ব্যাকগ্রাউন্ড টাস্কের সুবিধা

• অফলাইন সিঙ্ক্রোনাইজেশন: অ্যাপ ব্যাকগ্রাউন্ডে চলতে থাকলে, আপনি নেটওয়ার্কের সাথে সিঙ্ক্রোনাইজ করতে পারেন।
• নির্দিষ্ট সময় পর কাজ চালানো: নির্দিষ্ট সময় পর পর ডেটা আপডেট বা সিঙ্ক্রোনাইজ করা যায়।

2. Background Fetch

Background Fetch একটি React Native ফিচার যা অ্যাপ্লিকেশনকে ব্যাকগ্রাউন্ডে নির্দিষ্ট সময় পর পর ডেটা ফেচ বা সিঙ্ক্রোনাইজ করার সুযোগ দেয়। এটি সাধারণত অ্যাপের জন্য নতুন ডেটা বা কনটেন্ট ফেচিং বা সার্ভার থেকে ডেটা আপডেট করার জন্য ব্যবহৃত হয়। ব্যাকগ্রাউন্ড ফেচকে একটি নির্দিষ্ট সময়ে বা নির্দিষ্ট পরিমাণ সময় পর পর কাজ করতে কনফিগার করা যায়।

ব্যাকগ্রাউন্ড ফেচ লাইব্রেরি

React Native-এ react-native-background-fetch লাইব্রেরিটি ব্যাকগ্রাউন্ড ফেচ কাজ করার জন্য খুবই জনপ্রিয়। এটি একাধিক প্ল্যাটফর্মে (iOS এবং Android) সমর্থন প্রদান করে।

ইনস্টলেশন

npm install @transistorsoft/react-native-background-fetch

ব্যাকগ্রাউন্ড ফেচ সেটআপ

import BackgroundFetch from '@transistorsoft/react-native-background-fetch';

// ব্যাকগ্রাউন্ড ফেচ কনফিগারেশন
const configureBackgroundFetch = async () => {
  const onEvent = async (taskId) => {
    console.log('[BackgroundFetch] taskId:', taskId);
    // ব্যাকগ্রাউন্ডে ডেটা ফেচ বা সিঙ্ক্রোনাইজ করার কাজ
    // এখানে API কল বা ডেটা আপডেট করতে পারেন
    BackgroundFetch.finish(taskId);
  };

  const onTimeout = async (taskId) => {
    console.log('[BackgroundFetch] TIMEOUT taskId:', taskId);
    BackgroundFetch.finish(taskId);
  };

  // ব্যাকগ্রাউন্ড ফেচ কনফিগার করা
  const status = await BackgroundFetch.configure(
    {
      minimumFetchInterval: 15, // প্রতিটি 15 মিনিটে ফেচ
      stopOnTerminate: false, // অ্যাপ বন্ধ হলেও ফেচ চলতে থাকবে
      startOnBoot: true, // ডিভাইস রিবুট হলে ফেচ শুরু হবে
    },
    onEvent,
    onTimeout
  );

  console.log('Background fetch status:', status);
};

// ব্যাকগ্রাউন্ড ফেচ শুরু করা
useEffect(() => {
  configureBackgroundFetch();
}, []);

এখানে BackgroundFetch.configure মাধ্যমে ব্যাকগ্রাউন্ড ফেচ কনফিগার করা হয়েছে এবং প্রতি ১৫ মিনিট পর পর ব্যাকগ্রাউন্ড ফেচ ইভেন্ট হবে। onEvent ফাংশনে আপনি যেকোনো API কল বা ডেটা সিঙ্ক্রোনাইজেশন কার্যকলাপ করতে পারেন।

ব্যাকগ্রাউন্ড ফেচের সুবিধা

• অফলাইন সিঙ্ক্রোনাইজেশন: অ্যাপ ব্যাকগ্রাউন্ডে থাকা অবস্থায় নতুন ডেটা নিয়ে আসা বা সার্ভারের সাথে সিঙ্ক্রোনাইজেশন করা যায়।
• নেটওয়ার্ক নির্ভর ডেটা আপডেট: ইউজার যখন অ্যাপের সাথে ইন্টারঅ্যাক্ট করছেন না, তখনও নির্দিষ্ট সময় পর পর ডেটা আপডেট করা যায়।

সারাংশ

• Background Tasks এবং Background Fetch দুটি গুরুত্বপূর্ণ ফিচার যা অ্যাপ্লিকেশনগুলোকে ব্যাকগ্রাউন্ডে কাজ করতে সাহায্য করে, যেমন ডেটা সিঙ্ক্রোনাইজেশন এবং ফেচিং।
• Background Tasks এ আপনি নির্দিষ্ট সময় পর পর টাস্ক চালাতে পারেন, যেমন ডেটা সিঙ্ক্রোনাইজেশন বা এক্সটার্নাল API কল।
• Background Fetch দিয়ে আপনি নির্দিষ্ট সময় পর পর ডেটা ফেচ বা সিঙ্ক্রোনাইজ করতে পারেন, যা অ্যাপের ব্যাকগ্রাউন্ডে চলতে থাকে।

এগুলি React Native অ্যাপ্লিকেশনে অফলাইন কাজের জন্য খুবই উপকারী, বিশেষ করে যখন আপনাকে অ্যাপের কার্যকলাপ চালু রাখতে হবে, তবে ব্যবহারকারী অ্যাপটির সাথে ইন্টারঅ্যাক্ট না করলেও।

Expo Notifications API একটি শক্তিশালী এবং সহজে ব্যবহৃত লাইব্রেরি, যা React Native অ্যাপ্লিকেশনগুলিতে পুশ নোটিফিকেশন পাঠানোর জন্য ব্যবহৃত হয়। Expo Notifications API বিশেষভাবে Expo managed workflow-এ কাজ করতে ডিজাইন করা হয়েছে, তবে আপনি bare workflow-এও এটি ব্যবহার করতে পারেন।

Expo Notifications API ব্যবহার করে আপনি পুশ নোটিফিকেশন পাঠাতে পারেন যা ব্যবহারকারীকে অ্যাপের নতুন আপডেট বা গুরুত্বপূর্ণ তথ্য জানিয়ে দেয়। এটি অনলাইন এবং অফলাইন উভয় অবস্থাতেই কাজ করে।

এখানে আমরা Expo Notifications API-এর সেটআপ এবং ব্যবহারের একটি বিস্তারিত গাইড প্রদান করব।

Expo Notifications API সেটআপ

প্রথমত, আপনাকে Expo Notifications প্যাকেজটি ইনস্টল করতে হবে। Expo Notifications API ব্যবহার করার জন্য expo-notifications লাইব্রেরি ইনস্টল করা আবশ্যক।

১. ইনস্টলেশন

expo install expo-notifications

২. Expo Permissions সেটআপ

নোটিফিকেশন পাঠানোর আগে আপনাকে পারমিশন নিতে হবে। একাধিক প্ল্যাটফর্মে পারমিশন প্রক্রিয়া আলাদা হতে পারে (iOS এবং Android)। তাই পারমিশন চাওয়ার আগে আপনাকে expo-permissions ব্যবহার করতে হতে পারে। তবে, Expo SDK 41 থেকে এটি expo-notifications এ বিল্ট-ইন ফিচার হিসেবে আছে।

৩. Import এবং Basic Configuration

import React, { useState, useEffect } from 'react';
import { Button, Platform } from 'react-native';
import * as Notifications from 'expo-notifications';
import * as Permissions from 'expo-permissions';

export default function App() {
  const [expoPushToken, setExpoPushToken] = useState('');
  const [notification, setNotification] = useState(false);
  
  // Notification Listener Setup
  useEffect(() => {
    const subscription = Notifications.addNotificationReceivedListener(notification => {
      setNotification(notification);
    });

    return () => subscription.remove();
  }, []);

  // Request Permission and Get Expo Push Token
  const getPermissionAndToken = async () => {
    // Request notification permissions
    const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
    if (status === 'granted') {
      const token = await Notifications.getExpoPushTokenAsync();
      setExpoPushToken(token.data);
      console.log(token.data);
    }
  };

  // Handle the notification when the app is in the background
  useEffect(() => {
    const responseListener = Notifications.addNotificationResponseReceivedListener(response => {
      console.log(response);
    });

    return () => responseListener.remove();
  }, []);

  return (
    <Button
      title="Get Notification Permission"
      onPress={getPermissionAndToken}
    />
  );
}

ব্যাখ্যা:

• Permissions: প্রথমে আমরা ব্যবহারকারীর কাছ থেকে Notifications পারমিশন নিয়েছি।
• Expo Push Token: ব্যবহারকারীকে অনুমতি দেওয়ার পর, Expo Push Token তৈরি করা হয়েছে যা আমাদের পুশ নোটিফিকেশন পাঠানোর জন্য প্রয়োজন।
• Notification Listener: যখন ব্যবহারকারী নোটিফিকেশন পায়, তখন সেটা আমাদের অ্যাপে শো করবে।

Push Notification Sending via Expo

পুশ নোটিফিকেশন পাঠানোর জন্য, আপনাকে এক্সপো সার্ভিস থেকে Expo Push Token ব্যবহার করে নোটিফিকেশন পাঠানোর জন্য একটি সার্ভার তৈরি করতে হবে। Expo নিজেই Push Notification Service প্রদান করে, তাই আপনার সিস্টেমে পুশ নোটিফিকেশন পাঠাতে এক্সপো-এর push API ব্যবহার করা হয়।

পুশ নোটিফিকেশন পাঠানো

Expo Push Notification পাঠানোর জন্য, নিচের মত একটি API কল করতে হবে:

const sendPushNotification = async (expoPushToken) => {
  const message = {
    to: expoPushToken,
    sound: 'default',
    title: 'Hello',
    body: 'This is a test push notification',
    data: { someData: 'goes here' },
  };

  try {
    await fetch('https://exp.host/--/api/v2/push/send', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(message),
    });
  } catch (error) {
    console.error('Error sending notification', error);
  }
};

এখানে:

• to: এই প্রোপার্টিতে আমরা ব্যবহারকারীর Expo Push Token প্রদান করি।
• sound: এটি একটি সাউন্ড ফাইল নির্দিষ্ট করে যা নোটিফিকেশন পাঠানোর সময় বাজবে।
• title এবং body: নোটিফিকেশনের শিরোনাম এবং বডি সেট করা হয়।
• data: এটি অ্যাডিশনাল তথ্য প্রদান করে, যা আপনি প্রক্রিয়াজাত করতে পারেন।

পুশ নোটিফিকেশন পাঠানোর উদাহরণ:

sendPushNotification(expoPushToken);

এখানে, expoPushToken হলো ব্যবহারকারীর সংগ্রহিত পুশ টোকেন, যা getExpoPushTokenAsync থেকে আসবে।

Expo Push Notifications Configuration for iOS

iOS-এ পুশ নোটিফিকেশন পাঠানোর জন্য আপনাকে APNs (Apple Push Notification Service) সেটআপ করতে হবে। Expo এর মাধ্যমে Expo Push Notifications এভাবে কাজ করবে।

1. আপনার অ্যাপে Push Notification entitlement সক্রিয় করতে হবে।
2. Expo অ্যাপের মাধ্যমে পুশ নোটিফিকেশন কাজ করার জন্য আপনার অ্যাপকে Push Notifications অনুমতি দিতে হবে।
3. আপনি Apple Developer অ্যাকাউন্টের মাধ্যমে আপনার অ্যাপের জন্য APNs সার্টিফিকেট তৈরি করতে পারেন।

Expo Notifications API এর অন্যান্য ফিচার

1. Push Notification Scheduling:
   আপনি পুশ নোটিফিকেশন ভবিষ্যতের জন্য Schedule করতে পারেন। উদাহরণস্বরূপ, 10 সেকেন্ড পরে একটি নোটিফিকেশন পাঠানো।

   const schedulePushNotification = async () => {
     await Notifications.scheduleNotificationAsync({
       content: {
         title: "Scheduled Notification",
         body: 'This is a scheduled notification.',
       },
       trigger: {
         seconds: 10,
       },
     });
   };

2. Handling Notifications in Background:
   আপনি যখন অ্যাপটি ব্যাকগ্রাউন্ডে থাকে, তখনও নোটিফিকেশন শোনার জন্য সেটআপ করতে পারেন।

   Notifications.addNotificationResponseReceivedListener(response => {
     console.log('Notification received in background', response);
   });

সারাংশ

Expo Notifications API ব্যবহার করে React Native অ্যাপে পুশ নোটিফিকেশন সিস্টেম সেটআপ করা খুবই সহজ। এখানে কিছু মূল বিষয়:

• পারমিশন: পুশ নোটিফিকেশন পাঠানোর আগে অবশ্যই ব্যবহারকারীর পারমিশন নিতে হবে।
• Expo Push Token: পুশ নোটিফিকেশন পাঠানোর জন্য Expo Push Token প্রয়োজন।
• Push API: Expo Push API ব্যবহার করে নোটিফিকেশন পাঠানো হয়।
• Scheduled Notifications: নির্দিষ্ট সময় পরে নোটিফিকেশন পাঠানোর ব্যবস্থা।

Expo Notifications API দিয়ে আপনি real-time notifications, scheduled notifications, এবং background notifications ইত্যাদি সহজেই অ্যাপ্লিকেশনে যুক্ত করতে পারেন।